<template>
  <div class="medical-service-container">
    <div class="search-container">
      <el-input
        v-model="searchKeyword"
        placeholder="医疗服务名称"
        class="search-input"
        clearable
      >
        <template #append>
          <el-button @click="handleSearch">
            <el-icon><Search /></el-icon> 搜索
          </el-button>
        </template>
      </el-input>
    </div>
    
    <div class="action-buttons">
      <el-button type="primary" @click="handleAdd">
        <el-icon><Plus /></el-icon> 添加服务
      </el-button>
      <el-button type="danger" @click="handleBatchDelete">
        <el-icon><Delete /></el-icon> 删除选中
      </el-button>
    </div>
    
    <el-table
      :data="servicesList"
      stripe
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
      />
      <el-table-column
        type="index"
        label="序号"
        width="70"
        align="center"
      />
      <el-table-column
        prop="category"
        label="项目类别"
        width="80"
        align="center"
      />
      <el-table-column
        prop="code"
        label="项目编码"
        width="140"
      />
      <el-table-column
        prop="nationalCode"
        label="项目国家编码"
        width="220"
      />
      <el-table-column
        prop="name"
        label="项目名称"
        min-width="250"
      />
      <el-table-column
        prop="description"
        label="项目说明"
        min-width="200"
      />
      <el-table-column
        prop="exclusion"
        label="除外内容"
        min-width="100"
      />
      <el-table-column
        prop="unit"
        label="计价单位"
        width="90"
        align="center"
      />
      <el-table-column
        prop="price"
        label="价格"
        width="90"
        align="right"
      />
      <el-table-column
        prop="remark"
        label="备注"
        width="80"
      />
      <el-table-column
        label="操作"
        width="140"
        align="center"
        fixed="right"
      >
        <template #default="scope">
          <el-button type="primary" link @click="handleEdit(scope.row)">修改</el-button>
          <el-button type="danger" link @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <div class="pagination-container">
      <el-pagination
        v-model:currentPage="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalServices"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    
    <!-- 添加/编辑医疗服务对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogType === 'add' ? '添加医疗服务' : '编辑医疗服务'"
      width="50%"
    >
      <el-form
        :model="serviceForm"
        :rules="serviceRules"
        ref="serviceFormRef"
        label-width="120px"
      >
        <el-form-item label="项目类别" prop="category">
          <el-select v-model="serviceForm.category" placeholder="请选择项目类别">
            <el-option label="C" value="C" />
            <el-option label="D" value="D" />
            <el-option label="E" value="E" />
          </el-select>
        </el-form-item>
        <el-form-item label="项目编码" prop="code">
          <el-input v-model="serviceForm.code" placeholder="请输入项目编码" />
        </el-form-item>
        <el-form-item label="项目国家编码" prop="nationalCode">
          <el-input v-model="serviceForm.nationalCode" placeholder="请输入项目国家编码" />
        </el-form-item>
        <el-form-item label="项目名称" prop="name">
          <el-input v-model="serviceForm.name" placeholder="请输入项目名称" />
        </el-form-item>
        <el-form-item label="项目说明" prop="description">
          <el-input v-model="serviceForm.description" placeholder="请输入项目说明" type="textarea" rows="2" />
        </el-form-item>
        <el-form-item label="除外内容" prop="exclusion">
          <el-input v-model="serviceForm.exclusion" placeholder="请输入除外内容" type="textarea" rows="2" />
        </el-form-item>
        <el-form-item label="计价单位" prop="unit">
          <el-select v-model="serviceForm.unit" placeholder="请选择计价单位">
            <el-option label="次" value="次" />
            <el-option label="日" value="日" />
            <el-option label="台/次" value="台/次" />
          </el-select>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model.number="serviceForm.price" placeholder="请输入价格" type="number" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="serviceForm.remark" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Search, Plus, Delete } from '@element-plus/icons-vue';

const searchKeyword = ref('');
const currentPage = ref(1);
const pageSize = ref(10);
const totalServices = ref(30);
const selectedServices = ref([]);
const dialogVisible = ref(false);
const dialogType = ref('add');
const serviceFormRef = ref(null);

const serviceForm = reactive({
  id: '',
  category: '',
  code: '',
  nationalCode: '',
  name: '',
  description: '',
  exclusion: '',
  unit: '',
  price: '',
  remark: ''
});

const serviceRules = {
  category: [{ required: true, message: '请选择项目类别', trigger: 'change' }],
  code: [{ required: true, message: '请输入项目编码', trigger: 'blur' }],
  nationalCode: [{ required: true, message: '请输入项目国家编码', trigger: 'blur' }],
  name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
  unit: [{ required: true, message: '请选择计价单位', trigger: 'change' }],
  price: [
    { required: true, message: '请输入价格', trigger: 'blur' },
    { type: 'number', message: '价格必须为数字', trigger: 'blur' }
  ]
};

// 模拟医疗服务数据
const servicesList = ref([
  {
    id: 1,
    category: 'C',
    code: '110200001-1',
    nationalCode: '00110200001030-110200001-1',
    name: '门诊诊查费(医师)',
    description: '指医护人员提供技术劳务和诊疗服务',
    exclusion: '',
    unit: '次',
    price: '3',
    remark: ''
  },
  {
    id: 2,
    category: 'C',
    code: '110200001-1/1',
    nationalCode: '00110200001030-110200001-1/1',
    name: '门诊诊查费(传染病、发热处理门诊)(医师)',
    description: '',
    exclusion: '',
    unit: '次',
    price: '3.9',
    remark: ''
  },
  {
    id: 3,
    category: 'C',
    code: '110200001-1c',
    nationalCode: '00110200001030-110200001-1c',
    name: '门诊诊查费(6岁以下)(医师)',
    description: '',
    exclusion: '',
    unit: '次',
    price: '8',
    remark: ''
  },
  {
    id: 4,
    category: 'C',
    code: '110200001-1/1c',
    nationalCode: '00110200001030-110200001-1/1c',
    name: '门诊诊查费(传染病、发热处理门诊)(6岁以下)(医师)',
    description: '',
    exclusion: '',
    unit: '次',
    price: '10.4',
    remark: ''
  },
  {
    id: 5,
    category: 'C',
    code: '110200001-2',
    nationalCode: '00110200001030-110200001-2',
    name: '门诊诊查费(主治医师)',
    description: '指医护人员提供技术劳务和诊疗服务',
    exclusion: '',
    unit: '次',
    price: '6',
    remark: ''
  },
  {
    id: 6,
    category: 'C',
    code: '110200001-2/1',
    nationalCode: '00110200001030-110200001-2/1',
    name: '门诊诊查费(传染病、发热处理门诊)(主治医师)',
    description: '',
    exclusion: '',
    unit: '次',
    price: '7.8',
    remark: ''
  },
  {
    id: 7,
    category: 'C',
    code: '110200001-2c',
    nationalCode: '00110200001030-110200001-2c',
    name: '门诊诊查费(6岁以下)(主治医师)',
    description: '',
    exclusion: '',
    unit: '次',
    price: '10',
    remark: ''
  },
  {
    id: 8,
    category: 'C',
    code: '110200001-2/1c',
    nationalCode: '00110200001030-110200001-2/1c',
    name: '门诊诊查费(传染病、发热处理)(6岁以下)(主治医师)',
    description: '',
    exclusion: '',
    unit: '次',
    price: '13',
    remark: ''
  },
  {
    id: 9,
    category: 'C',
    code: '110200001-3',
    nationalCode: '00110200001030-110200001-3',
    name: '门诊诊查费(副主任医师及以上)',
    description: '指医护人员提供技术劳务和诊疗服务',
    exclusion: '',
    unit: '次',
    price: '12',
    remark: ''
  },
  {
    id: 10,
    category: 'C',
    code: '110200001-3/1',
    nationalCode: '00110200001030-110200001-3/1',
    name: '门诊诊查费(传染病、发热处理门诊)(副主任医师及以上)',
    description: '',
    exclusion: '',
    unit: '次',
    price: '15.6',
    remark: ''
  }
]);

// 处理搜索
const handleSearch = () => {
  currentPage.value = 1;
  // 这里应该发送请求进行搜索
  ElMessage.success('搜索关键词: ' + searchKeyword.value);
};

// 处理添加医疗服务
const handleAdd = () => {
  dialogType.value = 'add';
  resetForm();
  dialogVisible.value = true;
};

// 处理编辑医疗服务
const handleEdit = (row) => {
  dialogType.value = 'edit';
  resetForm();
  Object.keys(serviceForm).forEach(key => {
    serviceForm[key] = row[key];
  });
  dialogVisible.value = true;
};

// 处理删除医疗服务
const handleDelete = (row) => {
  ElMessageBox.confirm(`确定要删除"${row.name}"吗?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 这里应该发送请求删除医疗服务
    ElMessage.success(`已删除${row.name}`);
    servicesList.value = servicesList.value.filter(item => item.id !== row.id);
  }).catch(() => {});
};

// 处理批量删除
const handleBatchDelete = () => {
  if (selectedServices.value.length === 0) {
    ElMessage.warning('请至少选择一项');
    return;
  }
  
  ElMessageBox.confirm(`确定要删除选中的${selectedServices.value.length}项吗?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 这里应该发送请求批量删除
    const ids = selectedServices.value.map(item => item.id);
    servicesList.value = servicesList.value.filter(item => !ids.includes(item.id));
    ElMessage.success(`已删除${selectedServices.value.length}项`);
    selectedServices.value = [];
  }).catch(() => {});
};

// 处理表格选择变化
const handleSelectionChange = (selection) => {
  selectedServices.value = selection;
};

// 处理分页大小变化
const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1;
  // 这里应该重新加载数据
};

// 处理页码变化
const handleCurrentChange = (val) => {
  currentPage.value = val;
  // 这里应该重新加载数据
};

// 重置表单
const resetForm = () => {
  if (serviceFormRef.value) {
    serviceFormRef.value.resetFields();
  }
  Object.keys(serviceForm).forEach(key => {
    serviceForm[key] = '';
  });
};

// 提交表单
const submitForm = () => {
  serviceFormRef.value.validate((valid) => {
    if (valid) {
      if (dialogType.value === 'add') {
        // 这里应该发送请求添加医疗服务
        const newService = { ...serviceForm, id: Date.now() };
        servicesList.value.unshift(newService);
        ElMessage.success('添加成功');
      } else {
        // 这里应该发送请求更新医疗服务
        const index = servicesList.value.findIndex(item => item.id === serviceForm.id);
        if (index !== -1) {
          servicesList.value[index] = { ...serviceForm };
          ElMessage.success('更新成功');
        }
      }
      dialogVisible.value = false;
    }
  });
};

onMounted(() => {
  // 这里应该发送请求获取初始数据
  console.log('医疗服务数据维护组件已加载');
});
</script>

<style scoped>
.medical-service-container {
  padding: 20px;
}

.search-container {
  margin-bottom: 20px;
}

.search-input {
  width: 300px;
}

.action-buttons {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style> 